<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<router-link to="/user">用户</router-link>
			<router-link to="/goods">商品</router-link>
			<router-view />
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue-router.js"></script>
		<script type="text/javascript">
			//定义组件
			let user = {
				template:`
				<h2>用户</h2>
				`
			}
			let goods = {
				template:`
				<h2>商品</h2>
				`
			}
			//定义router对象
			const router = new VueRouter({
				//路由规则
				routes:[
					{path:'/',redirect:user},
					{path:'/user',component:user},
					{path:'/goods',component:goods},
				]
			})
			//创建vue对象
			let demo = new Vue({
				el:'#app',
				router,
				data:{
					href:'http://www.baidu.com',
				}
			})
		</script>
	</body>
</html>
